<template>
	<view>
		<van-nav-bar @click-left="$back" left-arrow title="领券中心" :border="false" />
		<scroll-view scroll-y :style="{height: height, backgroundColor: '#f8f8f8'}">
			<view class="me-coupon-box">
				<view class="me-coupon" v-for="item in list" :key="item.id">
					<view class="me-coupon-l">
						<text>{{item.fullUp === 0 ? '优惠券' : '满减券'}}</text>
					</view>
					<view class="me-coupon-r">
						<view class="me-coupon-r-t">
							<view class="me-coupon-r1">
								<text class="me-coupon-r11">{{item.title}}</text>
								<text class="me-coupon-r12" v-if="item.dateType == '2'">有效期至{{item.endTime}}</text>
								<text class="me-coupon-r12" v-if="item.dateType == '1'">剩{{item.days}}天到期</text>
							</view>
							<view class="me-coupon-r2">
								<text class="me-coupon-r21">&yen; {{item.reduction}}</text>
								<text class="me-coupon-r22" v-if="item.fullUp == 0">任意立减</text>
								<text class="me-coupon-r22" v-else>满{{item.fullUp}}可用</text>
							</view>
						</view>
						<view class="me-coupon-r-b">
							<van-button round size="mini" type="danger" @click="receive(item)">领券</van-button>
						</view>
					</view>
				</view>
			</view>
			<van-empty description="暂无优惠券可领取~" v-if="list.length===0"/>
		</scroll-view>
		<van-notify id="van-notify" />
	</view>
</template>

<script>
	import {
		myCouponList,
		couponList,
		receive
	} from '../../api/me/index.js';
	import Notify from '@/wxcomponents/vant/dist/notify/notify.js';
	import {mapActions} from 'vuex';
	export default {
		data() {
			return {
				list: []
			}
		},
		computed: {
			height() {
				return this.scrollviewHeilght - 46 + 'px'
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			...mapActions(['setCouponList']),
			getList() {
				couponList().then(res => {
					this.list = res.rows;
				})
			},
			// 领券
			receive(item) {
				receive({couponId: item.id}).then(() => {
					myCouponList().then(res => {
						this.setCouponList({couponList: res.rows});
					})
					this.list = this.list.filter(item1 => item1.id !== item.id);
					Notify({ type: 'danger', message: '领券成功'});
				})
			}
		}
	}
</script>

<style lang="scss">
	.history-value {
		color: #db3231 !important;
		font-size: 36rpx;
		font-weight: bold;
	}

	.bottom-button {
		width: 160px;
		height: 40px;
	}
</style>
<style lang="scss" scoped>
	.loading-text {
		text-align: center;
		color: #999999;
		font-size: 28rpx;
		line-height: 28rpx;
		padding: 16rpx 0;
	}

	.me-coupon-box {
		padding: 32rpx;

		.me-coupon {
			height: 200rpx;
			display: flex;
			align-items: center;
			margin-bottom: 32rpx;

			.me-coupon-l {
				width: 160rpx;
				height: 200rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: radial-gradient(circle at 0px 100rpx, transparent 10px, #EE0A24 0) top;
				border-radius: 16rpx 0 0 16rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: bold;
			}

			.me-coupon-r {
				flex: 1;
				height: 100%;
				background: radial-gradient(circle at right 100rpx, transparent 10px, #ffffff 0) top;
				border-left: 2rpx dashed #ccc;
				border-radius: 0 16rpx 16rpx 0;

				.me-coupon-r-t {
					height: 70%;
					display: flex;
					align-items: center;

					.me-coupon-r1 {
						display: flex;
						flex-direction: column;
						flex: 1;
						height: 100%;
						justify-content: center;
						padding-left: 32rpx;

						.me-coupon-r11 {
							font-size: 36rpx;
							color: #000000;
							padding-bottom: 12rpx;
						}

						.me-coupon-r12 {
							font-size: 20rpx;
							color: #999999;
						}
					}

					.me-coupon-r2 {
						width: 140rpx;
						height: 100%;
						display: flex;
						flex-direction: column;
						font-size: 24rpx;
						justify-content: center;
						align-items: center;

						.me-coupon-r21 {
							font-size: 36rpx;
							color: #EE0A24;
							font-weight: bold;
							padding-bottom: 12rpx;
						}

						.me-coupon-r22 {
							color: #666;
						}
					}
				}

				.me-coupon-r-b {
					height: 30%;
					text-align: right;
					padding-right: 32rpx;
				}
			}
		}
	}
</style>
